<template>
  <div class="location">
    <div
      class="location-left"
      v-if="isTakeSelf == 1"
      @click="$router.push('/store')"
    >
      <span class="address">
        <img src="../../assets/img/star_normal.png" alt />
        <div class="van-ellipsis">{{ storeInfo.storeName }}</div>
        <van-icon name="arrow" />
      </span>
      <span>距离您{{ distance | addZero }}km</span>
    </div>
    <div class="location-left" v-else @click="$router.push('/addressList')">
      <span class="address">
        <img src="../../assets/img/star_normal.png" alt />
        <div class="van-ellipsis">{{ currentAddress.addressDetail }}</div>
        <van-icon name="arrow" />
      </span>
      <div class="row-nowrap center">
        <van-icon
          color="grey"
          style="margin-right: 0.2rem"
          name="exchange"
        /><span style="margin-right: 0.2rem">{{ storeInfo.storeName }}</span
        ><span>送出外卖</span>
      </div>
    </div>
    <div class="location-right">
      <Change @changeShowLogin="changeShowLogin"></Change>
    </div>
  </div>
</template>

<script>
import Change from "@/components/commodity/Change";

export default {
  name: "location",
  components: {
    Change,
  },
  props: {},
  data() {
    return {};
  },
  filters: {
    addZero(value) {
      return value.toFixed(2);
    },
  },
  watch: {
    location(newValue, oldValue) {
      console.log("location变化", newValue);
    },
  },
  computed: {
    storeInfo() {
      return this.$store.getters.storeInfo;
    },
    userInfo() {
      return this.$store.getters.userInfo;
    },
    location() {
      return this.$store.getters.location;
    },
    isTakeSelf() {
      return this.$store.getters.isTakeSelf;
    },
    currentAddress() {
      return this.$store.getters.currentAddress;
    },
    distance() {
      if (JSON.stringify(this.location) != "{}") {
        console.log("计算距离",this.location,this.storeInfo)
        var storePosition = [this.storeInfo.lng, this.storeInfo.lat];
        var userPosition = [
          this.location.position.lng,
          this.location.position.lat,
        ];
        // 返回 p1 到 p2 间的地面距离，单位：米
        var dis = AMap.GeometryUtil.distance(
          storePosition,
          userPosition
        );
        return dis / 1000;
      } else {
        return 0;
      }
    },
  },
  methods: {
    changeShowLogin() {
      this.$emit("changeShowLogin");
    },
  },
};
</script>

<style scoped>
.location {
  /* position: absolute;
  top: 1.75rem;
  left: 0rem;
  right: 0rem; */
  width: 100%;
  height: 1.52rem;
  padding: 0.1rem 0.5rem 0.21rem 0.5rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  box-sizing: border-box;
  background-color: #fff;
}
.location-left {
  height: 100%;
  width: 6rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.location-left span {
  color: grey;
}
.location-left .address {
  font-size: 16px;
  color: #333;
  display: flex;
  flex-direction: row;
  height: 0.7rem;
  justify-items: center;
}
.location-left .address img {
  width: 0.6rem;
  height: 0.6rem;
  margin-right: 0.1rem;
}
.location-left .address .van-icon {
  line-height: 0.7rem;
  margin-left: 0.1rem;
  font-size: 14px;
  color: grey;
}
.location-right {
  height: 100%;
  width: 2.8rem;
  text-align: center;
  display: flex;
  flex-direction: column;
}
</style>